<template>
  <div>
    <div style="padding-bottom: 10px">
      <el-table v-loading="listLoading" :data="GiftList">
        <el-table-column
          align="center"
          label="ID"
          prop="OrderListID"
          show-overflow-tooltip
          width="70"
        />
        <!-- <el-table-column
          align="center"
          label="批准人"
          prop="title"
          show-overflow-tooltip
          width="90"
        /> -->
        <el-table-column
          align="center"
          label="赠品名称"
          prop="ProductName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="赠品成本"
          prop="ProductPrice"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="赠品数量"
          prop="ProductPrice"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="服务期限" width="230">
          <template #default="{ row }">
            {{ row.ServiceStartDate }} 至 {{ row.ServiceEndDate }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template #default="{ row }">
            <el-button type="success" size="small" @click="productEdit(row)">
              详情
            </el-button>
            <el-button
              v-if="OrderFlowState === 1"
              type="danger"
              size="small"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <vab-query-form v-if="OrderFlowState === 1" style="padding: 10px">
      <vab-query-form-right-panel :span="23">
        <el-form ref="formRef" :model="GiftForm">
          <el-space>
            <el-form-item label="选择赠品">
              <el-cascader
                v-model="GiftForm.SelectGift"
                :options="GiftOptions"
                @change="handleSelectGift"
              />
            </el-form-item>
            <el-form-item label="设定服务期限" style="width: 380px">
              <DateSelect ref="DateSelectRef" @get-date="getDate" />
              <!-- <el-date-picker
                v-model="GiftForm.SeviceDates"
                type="daterange"
                unlink-panels
                start-placeholder="Start date"
                end-placeholder="End date"
              /> -->
            </el-form-item>
            <el-form-item>
              <el-button :icon="Search" type="primary" @click="saveGift">
                确认添加
              </el-button>
            </el-form-item>
          </el-space>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
  </div>
</template>

<script>
  import { GiftSelect } from '@/api/common'
  import { saveOrderGift, deleteGift } from '@/api/businessOrderCreate'

  import DateSelect from '/src/components/DateSelect.vue'
  export default defineComponent({
    name: 'GiftList',
    components: { DateSelect },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        OrderID: 0,
        OrderFlowState: 1,
        listLoading: false,
        GiftOptions: [],
        formRef: null,
        editRef: null,
        GiftList: [],
        DateSelectRef: null,

        GiftForm: {
          OrderListID: 0,
        },
        title: '',
      })
      const showList = (OrderInfo, list) => {
        state.OrderID = OrderInfo.OrderID
        state.OrderFlowState = Math.abs(OrderInfo.OrderFlowState)
        state.GiftForm.OrderID = OrderInfo.OrderID
        state.GiftList = list
      }

      const getDate = (data) => {
        state.ProductForm.SeviceDates = data
        console.log(data, '子组件传过来的时间数组')
      }
      const giftDelete = (row) => {
        console.log(row)
        if (row.OrderListID) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await deleteGift({
              OrderListID: row.OrderListID,
            })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
          })
        }
      }
      const saveGift = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await saveOrderGift(state.GiftForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            state.GiftForm = {
              OrderListID: 0,
            }
            state.DateSelectRef.empty()

            emit('fetch-data')
          }
        })
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { GiftOptions },
        } = await GiftSelect()
        state.GiftOptions = GiftOptions
        state.listLoading = false
      }

      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        showList,
        saveGift,
        getDate,
        // giftEdit,
        giftDelete,
      }
    },
  })
</script>
